img {
  display: block;
  border: none;
}
#zoomBox {
  position: relative;
  width: 400px;
  border: 1px solid red;
}
#midArea {
  width: 400px;
  height: 400px;
}
#midArea img {
  width: 400px;
  height: 400px;
}
#zoom {
  display: none;
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: yellow;
  opacity: 0.3;
  cursor: move;
}
#bigArea {
  display: none;
  position: absolute;
  left: 400px;
  top: -1px;
  width: 400px;
  height: 400px;
  border: 1px solid #cecece;
  overflow: hidden;
}
#bigArea img {
  position: absolute;
  width: 800px;
  height: 800px;
}
#smallArea {
  border-top: 1px solid #cecece;
  height: 50px;
  padding: 10px;
}
#smallArea img {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 10px;
}